<template>
  <view>
    <view
      class="tree-node"
      @click.stop="handleNodeClick"
      :style="{ paddingLeft: (level * 20) + 'rpx' }"
    >
      <!-- 展开/收起图标 -->
      <text v-if="hasChildren" @click.stop="toggleExpand" style="margin-right: 10rpx;">
        {{ expanded ? '▼' : '▶' }}
      </text>
      <text>{{node.name}}</text>
      <text v-if="!hasChildren" style="color: #888; margin-left: 10rpx;">
        观看进度{{ node.view_progress }}%
      </text>
    </view>
    <!-- 递归渲染子节点 -->
    <view v-if="hasChildren && expanded">
      <TreeNode
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        :level="level + 1"
        @node-click="$emit('node-click', $event)"
      />
    </view>
  </view>
</template>

<script>
import TreeNode from './TreeNode.vue'
export default {
  name: "TreeNode",
  components: { TreeNode },
  props: {
    node: Object,
    level: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      expanded: false
    }
  },
  computed: {
    hasChildren() {
      // 打印children调试
      console.log('wy-3', this.node.children);
      return this.node.children && this.node.children.length > 0;
    }
  },
  methods: {
    toggleExpand() {
      this.expanded = !this.expanded;
      console.log('wy-1 expanded:', this.expanded);
    },
    handleNodeClick() {
      console.log('wy-2');
      // 只有叶子节点才触发播放
      if (!this.hasChildren) {
        this.$emit('node-click', this.node);
      } else {
        this.toggleExpand();
      }
    }
  }
};
</script>

<style scoped>
.tree-node {
  padding: 10rpx 0;
  cursor: pointer;
  user-select: none;
}
</style> 